<template>
  <view>
    <!-- <uni-nav-bar
      fixed="true"
      @click-left="back"
      left-text="返回"
      title="身份认证"
      left-icon="jiantou2"
      background-color="#007BC3"
    ></uni-nav-bar>
    <view :style="style"></view> -->
    <form @submit="formSubmit">
      <view class="grace-padding grace-bg-white  grace-common-border">
        <view class="grace-form">
          <view class="grace-items">
            <view class="grace-label">姓名</view>
            <input
              type="text"
              class="input"
              placeholder="请输入真实姓名"
              name="nickname"
              placeholder-style="color:#B8B8B8"
            >
          </view>
          <view class="grace-items">
            <view class="grace-label">性别</view>
            <view class="grace-form-r">
              <picker
                @change="bindPickerChange"
                v-model="genderValue"
                :value="genderIndex"
                :range="gender"
                name="gender"
              >
                <text>{{gender[genderIndex]}}</text>
              </picker>
            </view>
          </view>
          <view class="grace-items">
            <view class="grace-label grace-label_1">国籍(区域)</view>
            <view class="grace-form-r">
              <picker
                @change="bindPickerCountry"
                :value="countryIndex"
                :range="country"
                name="country"
              >
                <text>{{country[countryIndex]}}</text>
              </picker>
            </view>
          </view>
        </view>
      </view>

      <view class="grace-padding grace-bg-white grace-common-mtfours grace-common-border">
        <view class="grace-form">
          <view class="grace-items">
            <view class="grace-label">证件类型</view>
            <view class="grace-form-r">
              <picker
                @change="bindZjlxChange"
                :value="zjlxIndex"
                :range="zjlx"
                name="zjlx"
              >
                <text>{{zjlx[zjlxIndex]}}</text>
              </picker>
            </view>
          </view>

          <view class="grace-items">
            <view class="grace-label">证件号码</view>
            <input
              type="text"
              class="input"
              placeholder="请输入证件号"
              name="zjhm"
              placeholder-style="color:#B8B8B8"
            >
          </view>
          <view class="grace-items">
            <view class="grace-label">证件有效期</view>
            <view class="grace-form-r">
              <picker
                @change="bindDateChange"
                :value="dateValue"
                mode="date"
                name="bdyxq"
                start="2018-01-01"
                end="2019-01-01"
              >
                <text>{{dateValue}}</text>
              </picker>
            </view>
          </view>
        </view>
      </view>

      <view class="grace-padding grace-bg-white grace-common-mtfours grace-common-border">
        <view class="grace-form">
          <view class="grace-items">
            <view class="grace-label">职业类型</view>
            <input
              type="text"
              class="input"
              placeholder="请输入职业类型"
              name="zylx"
              placeholder-style="color:#B8B8B8"
            >
          </view>
          <view class="grace-items">
            <view class="grace-label">地址</view>
            <input
              type="text"
              class="input"
              placeholder="请输入地址"
              name="address"
              placeholder-style="color:#B8B8B8"
            >
          </view>
        </view>
      </view>
      <view>
        <button
          formType="submit"
          type="primary"
        >下一步</button>
      </view>
    </form>
  </view>
</template>
<script>
import uniNavBar from "@/components/uninavbar";
import uniIcon from "@/components/uni-icon";
var lmqChecker = require("@/graceUI/graceChecker.js");
export default {
  components: {
    uniNavBar,
    uniIcon
  },
  data() {
    return {
      zjhm: "",
      name: "",
      // 证件类型
      zjlx: ["身份证", "护照"],
      zjlxIndex: 0,
      countryIndex: 0,
      genderIndex: 0,
      gender: ["男", "女"],
      genderValue: "",
      country: ["阿根廷 阿拉啦木盒", "韩国", "美国", "福州"],
      dateValue: "请输入证件有日期"
    };
  },
  computed: {
    //获取状态栏高度
    style() {
      var systemInfo = uni.getSystemInfoSync();
      var systo = uni.getSystemInfo();
      var statusBarHeight = systemInfo.statusBarHeight;
      return `height:${statusBarHeight + 44}px`;
    }
  },
  methods: {
    back() {
      uni.navigateBack({
        delta: 1
      });
    },
    bindZjlxChange(e) {
      this.zjlxIndex = e.detail.value;
      // console.log(this.zjlx[this.zjlxIndex]);
    },
    bindPickerChange: function(e) {
      console.log(e);
      this.genderIndex = e.detail.value;
      this.genderValue = this.gender[this.genderIndex];
    },
    bindPickerCountry: function(e) {
      console.log(JSON.stringify(e));
      this.countryIndex = e.detail.value;
    },
    bindDateChange: function(e) {
      this.dateValue = e.detail.value;
    },
    formSubmit: function(e) {
      //定义表单规则
      var rule = [
        {
          name: "nickname",
          checkType: "string",
          checkRule: "1,3",
          errorMsg: "姓名应为1-3个字符"
        },
        // {
        //   name: "gender",
        //   checkType: "same",
        //   checkRule: "",
        //   errorMsg: "请选择性别"
        // },
        // {
        //   name: "country",
        //   checkType: "in",
        //   checkRule: "中国,韩国,美国,福州",
        //   errorMsg: "请选择国家"
        // },
        // {
        //   name: "zjlx",
        //   checkType: "in",
        //   checkRule: "身份证,护照",
        //   errorMsg: "请选择证件类型"
        // },
        // {
        //   name: "zjhm",
        //   checkType: "string",
        //   checkRule: "18,18",
        //   errorMsg: "请输入正确的身份证号码"
        // },
        {
          name: "bdyxq",
          checkType: "notsame",
          checkRule: "请输入证件有日期",
          errorMsg: "请选择证件有效期"
        },
        {
          name: "zylx",
          checkType: "notnull",
          checkRule: "",
          errorMsg: "职业类型不能为空"
        },
        {
          name: "address",
          checkType: "notnull",
          checkRule: "",
          errorMsg: "地址不能为空"
        }
      ];
      var formData = e.detail.value;
      var checkRes = lmqChecker.check(formData, rule);
      // wx.showToast({ title: "已发送数据", icon: "none" });
      if (checkRes) {
        uni.showToast({ title: "验证通过!", icon: "none" });
        console.log(JSON.stringify(e.detail.value));
        uni.navigateTo({
          url:
            "../Alipay-price/Alipay-money?detail=" +
            JSON.stringify(e.detail.value)
        });
      } else {
        uni.showToast({ title: lmqChecker.error, icon: "none" });
      }

      // console.log(input.type);

      // if (input.value == "" && picker.value == "") {
      //   wx.showToast({ title: "发送不出去数据", icon: "none" });
      // } else {
      //   wx.showToast({ title: "已发送数据", icon: "none" });
      //   console.log(JSON.stringify(e.detail.value));
      // }
    }
  },
  back() {
    uni.navigateBack({
      delta: 1
    });
  }
};
</script>
<style lang="scss" scope>
text {
  color: #c1c0bf;
}
.grace-form-r {
  width: 100%;
  padding: 0 22px;
  line-height: 40px;
  display: block;
  overflow: hidden;
  -webkit-flex-shrink: 1;
  -ms-flex-negative: 1;
  flex-shrink: 1;
  margin-left: 9px;
  text-align: right;

  text {
    font-size: 28upx;
    font-weight: 400;
    color: rgba(184, 184, 184, 1);
  }
}
.grace-padding {
  /* padding: 0% 5%; */

  width: 100%;
  box-sizing: border-box;
  padding: 0;
  padding-left: 5%;
}
.grace-form .grace-items picker text:after {
  content: "\e634";
  padding-left: 10upx;
  color: rgba(163, 163, 163, 1);
  font-family: "lmqicon" !important;
  font-size: 22upx;
}
.grace-form .grace-items {
  padding: 3px 0;
}
.grace-common-mt {
  margin-top: 50upx;
}
.grace-common-mtfours {
  margin: 40upx 0;
}
.grace-label {
  font-size: 32upx;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
}

.grace-label_1 {
  width: 75px !important;
}
button {
  width: 92%;
  /* width:690px; */
  /* height: 88px; */
  background: rgba(82, 153, 247, 1);
  border-radius: 5px;
  margin: 0 auto;
}
</style>
